<template>
    <div class="main">
        <div class="form-container">
            <div  class="form-main">
                 <div class="enter_title">
                     <h2 style="background:#265eff;">医院需求上报系统</h2>
                 </div>
                 <div class="enter_big">
                    <div class="currentProvince">
                        <span class="required" style="color:red">*</span>
                        <label for="name">所在城市</label><br/>
                        <input class="form-border" id="currentProvince" readonly  @click="showSelectPopup=true"  type="text" name="currentProvince"   placeholder="请选择所在城市"  v-model="currentCity"  /> <br/>
                    </div>
                     <div > 
                        <span class="required" style="color:red">*</span>
                        <label for="name">医院</label><br/>
                        <input class="form-border" id="hospitalModel" type="text"  placeholder="请选择医院" readonly @click="showPopupPicker=true" v-model="hospitalModelStr"  /> <br/>
                        <popup-picker  :data="hospitalList"  :columns="3" ref="hospital" v-model="hospitalModel"  @on-change="onChange" :show.sync="showPopupPicker" :show-cell="false" ></popup-picker>
                    </div>
                    <div  > 
                        <span class="required" style="color:red">*</span> 
                        <label for="name">开放床位（张）</label><br/>

                        <input class="form-border" type="number"  placeholder="请填写开放床位数量"  v-model="bedOpenNumber"  /> <br/>
                    </div>
                    <div  > 
                        <span class="required" style="color:red">*</span>
                        <label for="name">已用床位（张）</label><br/>

                        <input class="form-border" type="number" placeholder="请填写已用床位数量"  v-model="bedUserNumber"  /> <br/>
                    </div>
                    <div  > 
                        <span class="required" style="color:red">*</span>
                        <label for="name">空床位（张）</label><br/>

                        <input class="form-border" type="number"  placeholder="请填写空床位数量"  v-model="bedEmptyNumber"  /> <br/>
                    </div>
                    <div  > 
                         <span class="required" style="color:red">*</span>
                        <label for="name">联系人</label><br/>

                        <input class="form-border" id="contactsPerson" type="text"  placeholder="请填写联系人"  v-model="contactsPerson"  /> <br/>
                    </div>
                    <div >
                         <span class="required" style="color:red">*</span>
                        <label for="name">联系电话</label><br/>

                        <input class="form-border" id="contactsPersonPhone" type="text" name="contactsPersonPhone"  placeholder="请填写联系电话"  v-model="contactsPersonPhone"  /> <br/>
                    </div>
                    <div v-for="(item,index) in materialList" :key="index">
                        <div  > 
                            <!-- <span class="required" style="color:red">*</span>  -->
                            <label for="name">所需要物资</label><br/>

                            <input class="form-border"  type="text"  placeholder="请选择所需物资" readonly @click="selectMateria(index)" v-model="item.name"  /> <br/>
                        </div>
                        <div >
                            <!-- <span class="required" style="color:red">*</span>  -->
                            <label for="name">所需数量</label><br/>

                            <input class="form-border"  type="number"  placeholder="请填写所需数量"  v-model="item.num"  /> <br/>
                        </div>
                        <div >
                            <!-- <span class="required" style="color:red">*</span>  -->
                            <label for="name">说明</label><br/>

                            <input class="form-border"  type="text"  placeholder="请填写物资说明"  v-model="item.note"  /> <br/>
                        </div>
                    </div>
                    <x-button type="default"  @click.native="addOther">添加其它物资</x-button>

                    <x-button type="default"  @click.native="submitForm">提交表单</x-button>
                    <popup-picker  :data="materialArr"  v-model="materialModel"  @on-change="onChangem" :show.sync="showPopupPickerm" :show-cell="false" ></popup-picker>
                 </div>
            </div>
        </div>
        <datetime style="display:none;" v-model="queryTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
         <popup v-model="showSelectPopup" @on-hide="popupChange('hide')" @on-show="popupChange('show')" height="50%">
             <menuLinkage :queryObj="casList" @setCityObj="setCityObj" ref="menuLinkage" />
         </popup>
        <!-- <popup-picker :showCell="false" title="测试" :show.sync="showPopupPicker" :data="casList" :columns="3" v-model="casModel" ></popup-picker> -->
    </div>
</template>
<script>
import { newquestionnaireData ,queryCityDataForTwo,queryHospitalForDistict,queryMaterial,needMaterialSubmit} from '@/assets/js/service'
import { Confirm , Datetime,PopupPicker,Popup,XButton} from 'vux'
import menuLinkage from '../commons/menuLinkage.vue'

export default {
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup,
        menuLinkage,
        XButton
    },
    data () {
        return {
            casList:[],
            casModel:[],
            hospitalModel:[],
            hospitalModelStr:"",
            hospitalList:[],
            openSimple:false,
            contactsPerson:"",//联系人
            contactsPersonPhone:"",//联系电话
            materialList:[{name:"",num:"",note:""}],
            materialModel:[],
            currmaterial:0,
            materialArr:[],
            showPopupPickerm:false,
            showPopupPicker:false,
            districCode:"420100",//行政区划code
            bedOpenNumber:"",
            bedUserNumber:"",
            bedEmptyNumber:"",
            timeShow:false,
            showSelectPopup:false,
            temperatureModel:'',
            feverModel:'1',
            contactModel:'1',
            showconfirm:false,
            confirmtitle:"是否继续填写",
            // 新增
            queryTime:"开始时间",
            currentProvince:'',//当前所在省
            currentCity: '湖北省 武汉市',//当前所在市
            currentCounty: '',//当前所在区/县
            currentCountry: '',//街道/乡/镇（当前所在地）
            currentVillage: '',//社区/村（当前所在地）
            currentLocation: '',//当前所在地（详细住址)
        }
    },
    created () {
        this.initcascade();
    },
    mounted: function () {
       let personMsg = localStorage.getItem('personMsg');
       this.endTime = this.getCurrentDate();
    },
    watch:{
        ageModel(){}
    },
    methods: {
        onChange(val){
            console.log('val change', val)
            this.hospitalModelStr = this.$refs.hospital.getNameValues();
        },
        onChangem(val){
            console.log('val change', val)
            this.materialList[this.currmaterial].name=val[0]
        },
        addOther(){
            console.log("添加其它物资")
            console.log(this.materialList)
            let obj={name:"",num:"",note:""};
            this.materialList.push(obj)
        },
        submitForm(){
            console.log("提交表单")
            let _this=this;
            let param={"hospitalId":_this.hospitalModel[0],"districCode":_this.districCode,"contactPerson":_this.contactsPerson,"contactPhone":_this.contactsPersonPhone,"bedOpenNumber":_this.bedOpenNumber,"bedUserNumber":_this.bedUserNumber,"bedEmptyNumber":_this.bedEmptyNumber,"materialDemands":JSON.stringify(_this.materialList)}
            console.log(param);
            if(_this.$verification(_this.hospitalModelStr,0,"医院")&&_this.$verification(_this.bedOpenNumber,0,"开放床位")&&_this.$verification(_this.bedUserNumber,0,"已用床位")
            &&_this.$verification(_this.bedEmptyNumber,0,"空床位")&&_this.$verification(_this.contactsPerson,0,"联系人")&&_this.$verification(_this.contactsPersonPhone,0,"联系电话")){
                needMaterialSubmit(param,function(res){
                    console.log("submit===>",res)
                    if(res&&res.success){
                        _this.$showBottomToast("上报成功")
                    }else{
                        _this.$showBottomToast(JSON.stringify(res))
                    }
                })
            }
            
        },
        selectMateria(_index){
            console.log("open materia==>"+_index)
            this.currmaterial=_index;
            this.showPopupPickerm=true;
        },
        setCityObj(_list){
            console.log(_list)
            if(typeof(_list[0])!='undefined'&&typeof(_list[1])!='undefined'){
                this.currentCity=_list[0].name+" "+_list[1].name;
                this.districCode=_list[1].code;
                this.initHospital();
            }else{
                 this.currentCity="";
            }
            this.showSelectPopup=false;
        },
        initHospital(){
            let _this=this;
            queryHospitalForDistict({"code":this.districCode},function(res){
                console.log("res queryHospitalForDistict==>",res)
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                   _this.hospitalList=[];
                   res.data.forEach((item,index)=>{
                       let obj={name:item.orgname,value:item.id, parent: 0}
                       _this.hospitalList.push(obj);
                   })
                   console.log(_this.hospitalList);
                    
                }
            })
        },
        initcascade(){
            let _this=this;
            //初始化行政区划
            queryCityDataForTwo({},function(res){
                console.log("res==>",res)
                _this.casList=[];
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                    _this.casList=res.data;
                    _this.$refs.menuLinkage.initData(_this.casList,0);
                    _this.$refs.menuLinkage.setDefault(['湖北省','武汉市'])
                }
            })
            //初始化武汉医院
            _this.initHospital();
            
            //初始化物资信息
            console.log("queryMaterial== param==>>"+_this.$route.query.type)
            let typeStr=_this.$route.query.type;
            queryMaterial({"type":typeStr},function(res){
                console.log("res queryMaterial==>",res)
                if(typeof(res.data)!="undefined"&&res.data.length>0){
                    _this.materialArr=[];
                    let list=[];
                    res.data.forEach((item,index)=>{
                        list.push(item.materialName);
                    })
                     _this.materialArr.push(list);
                }
            })
        },
        popupChange(_type){
            console.log("_type==>"+_type);
        },
        showTimePlugin(){
            this.timeShow=true;
        },
        clearTree(){
        },
        changeTime(){
            console.log("change time")
            const cqueryTime=Date.parse(this.queryTime);
            const cendTime=Date.parse(this.endTime);
            // if(cqueryTime > cendTime){
            //     this.queryTime = "开始时间";
            //     window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
            // }
        },
        getCurrentDate(){
              const timeStr = '-';
              const curDate = new Date();
              const curYear =curDate.getFullYear();  //获取完整的年份(4位,1970-????)
              const curMonth = curDate.getMonth()+1;  //获取当前月份(0-11,0代表1月)
              const curDay = curDate.getDate();       //获取当前日(1-31)
              const curWeekDay = curDate.getDay();    //获取当前星期X(0-6,0代表星期天)
              const curHour = curDate.getHours();      //获取当前小时数(0-23)
              const curMinute = curDate.getMinutes();   // 获取当前分钟数(0-59)
              const curSec =curDate.getSeconds();      //获取当前秒数(0-59)
             const Current= curYear+timeStr+curMonth+timeStr+curDay ;
              return Current;
        },
        getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return  unescape(r[2]);
            return null;
        },
        typeTime(val){
            const d = new Date(val);
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
            return resDate;
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
    }
}
</script>
<style lang="less" scoped>

.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    
    .form-container{
        // background: url("../../assets/images/home/cont_bj.png") 0 0;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        // margin: 0 3%;
        // padding: 0 6px;
        .enter_title{
            width: 100%;
            height: 10%;
        }
        .enter_big{
            width: 100%;
            height: 90%;
            overflow: auto;
            padding: 0 20px;
        }
        .form-main{
            width: 100%;
            height: 100%;
            // margin-top: 130px;
            color: #333333;
            .warn-content{
                margin-top: 10px;
                margin-bottom: 18px;
                line-height: 30px;
                font-size: 15px;
            }
            h2{
                text-align: center;
                color: #fff;
                width: calc(100% + 40px);
                margin-left: -20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                height: 60px;
                line-height: 60px;
                font-size: 24px;
            }
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 5px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
            }
            .tizheng{
                div{
                    width: 33.3333%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 5px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
        .form-submit{
            width: 90%;
            margin-left: 5%;
            height: 50px;
            background: #228ed9;
            border-radius: 8px;
            color: white;
            font-size: 15px;
            border: none;
            outline: none;
        }
    }
input{
    border: 1px solid #cccccc;
}
.yy-input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: red;
  }
    
}
</style>